import React, { Component } from "react";
import { View, Text, TouchableOpacity, Alert,DeviceEventEmitter } from "react-native";
import NavBarConfig from "../modules/NavBar";
import http from "../../util/http";
import { BGT_INFO, REDEEM_CODE, REDEEM } from "../../config/Api";
import { REDEEM_DETAIL } from "../../util/Const";
import storage from "../../util/storage";
import moment from "moment";
import { toast } from "../../util/tip";
import redeemStyles from "../../style/pages/redeem";

const status = {
  0x11: "未審核",
  0x21: "審核通過",
  0x42: "審核未通過",
  0x82: "作廢/取消",
  0xA2: "取消",
  0x102: "贖回成功"
};

class RedeemConfirm extends Component {
  static navigationOptions = ({ navigation }) =>
    NavBarConfig(
      {
        headerTitle: "贖回確認",
        headerRight: []
      },
      navigation
    );
  state = {
    bgt: {
      fee_rate: 0.02, //手续费比例
      min_fee: 10, //最低手续费(代币)
      confirm_days: 1 //	T+n日确认赎回
    },
    redeem: {}
  };

  async getBgtInfo() {
    const data = await http.get(BGT_INFO);
    this.setState({
      bgt: data.data
    });
  }

  getReddem() {
    const data = JSON.parse(storage.get(REDEEM_DETAIL));
    this.setState({
      redeem: data || {
        id: 1,
        address: "asdkhzciockjzxhcaksd",
        amount: 1000,
        comment: "取太多了",
        audittime: "2018-08-12 12:00:00",
        createtime: "2018-08-12 12:00:00",
        updatetime: "2018-08-12 12:00:00",
        status: 0x11
      }
    });
  }

  async handleConfirm() {
    Alert.alert("Alert", "确定赎回吗？", [
      {
        text: "确定",
        onPress: async () => {
          let data = await http.post(
            `${REDEEM}/${this.state.redeem.id}/confirm`,
            {
              id: this.state.redeem.id
            }
          );
          if (data) {
            toast("確認成功");
            DeviceEventEmitter.emit("refresh_redeem")
            this.props.navigation.goBack();
          }
        }
      },
      { text: "取消" }
    ]);
  }

  async handleCancel() {
    Alert.alert(
      "Alert",
      this.state.redeem.status === 0x11
        ? "确认取消该笔赎回操作吗？"
        : "放弃赎回，申请期间仍有收益，但7天内不能再发起赎回操作",
      [
        {
          text: "确定",
          onPress: async () => {
            const data = await http.delete(
              `${REDEEM}/${this.state.redeem.id}`,
              {
                id: this.state.redeem.id
              }
            );
            if (data) {
              toast("取消成功");
              DeviceEventEmitter.emit("refresh_redeem")
              this.props.navigation.goBack();
            }
          }
        },
        { text: "取消" }
      ]
    );
  }

  componentWillMount() {
    this.getReddem();
    this.getBgtInfo();
  }

  render() {
    const { redeem, bgt } = this.state;

    return (
      <View>
        <View style={redeemStyles.redeemDetailContainer}>
          <View style={redeemStyles.redeemDetailItem}>
            <Text style={redeemStyles.redeenItemHead}>贖回信息</Text>
            <View>
              <View style={redeemStyles.redeemDetailLstLi}>
                <Text style={redeemStyles.listLiDiv}>贖回BGT數</Text>
                <Text style={redeemStyles.listLiDivRight}>{redeem.amount}</Text>
              </View>
              <View style={redeemStyles.redeemDetailLstLi}>
                <Text style={redeemStyles.listLiDiv}>贖回USDT數</Text>
                <Text style={redeemStyles.listLiDivRight}>
                  {Number(redeem.amount / (bgt.usdt_rate || 10)).toFixed(8)}
                </Text>
              </View>
              <View style={redeemStyles.redeemDetailLstLi}>
                <Text style={redeemStyles.listLiDiv}>
                  贖回手續費(
                  {Number(bgt.fee_rate * 100).toFixed(8)}
                  %)
                </Text>
                <Text style={redeemStyles.listLiDivRight}>
                  {bgt.fee_rate * redeem.amount}
                </Text>
              </View>
              <View style={redeemStyles.redeemDetailLstLi}>
                <Text style={redeemStyles.listLiDiv}>USDT錢包地址</Text>
                <Text style={redeemStyles.listLiDivRight}>
                  {redeem.address}
                </Text>
              </View>
              <View style={redeemStyles.redeemDetailLstLi}>
                <Text style={redeemStyles.listLiDiv}>申請時間</Text>
                <Text style={redeemStyles.listLiDivRight}>
                  {moment(new Date(redeem.createtime)).utcOffset(new Date(redeem.createtime).getTimezoneOffset()).format("YYYY-MM-DD HH:mm:ss")}
                </Text>
              </View>
            </View>
          </View>
          <View style={redeemStyles.redeemDetailItem}>
            <Text style={redeemStyles.redeenItemHead}>審核信息</Text>
            <View>
              <View style={redeemStyles.redeemDetailLstLi}>
                <Text style={redeemStyles.listLiDiv}>扣除BGT数</Text>
                <Text style={redeemStyles.listLiDivRight}>
                  {bgt.fee_rate * redeem.amount}
                </Text>
              </View>
              <View style={redeemStyles.redeemDetailLstLi}>
                <Text style={redeemStyles.listLiDiv}>到賬USDT数</Text>
                <Text style={redeemStyles.listLiDivRight}>
                  {(redeem.amount - bgt.fee_rate * redeem.amount) / (bgt.usdt_rate || 10)}
                </Text>
              </View>
              {/* <li>
                <div className="detail-item-left">审核期间收益（BGT）</div>
                <div className="detail-item-right">100</div>
              </li> */}
              <View style={[redeemStyles.redeemDetailLstLi]}>
                <Text
                  style={[
                    redeemStyles.listLiDiv,
                    {
                      color: "red"
                    }
                  ]}
                >
                  審核状态
                </Text>
                <Text
                  style={[
                    redeemStyles.listLiDivRight,
                    {
                      color: "red"
                    }
                  ]}
                >
                  {status[redeem.status]}
                </Text>
              </View>
              {redeem.status == 0x42 ? (
                <View style={redeemStyles.redeemDetailLstLi}>
                  <Text style={redeemStyles.listLiDiv}>審核未通過原因</Text>
                  <Text style={redeemStyles.listLiDivRight}>
                    {redeem.comment}
                  </Text>
                </View>
              ) : null}
              {redeem.audittime ? (
                <View style={redeemStyles.redeemDetailLstLi}>
                  <Text style={redeemStyles.listLiDiv}>審核时间</Text>
                  <Text style={redeemStyles.listLiDivRight}>
                  
                  {moment(new Date(redeem.audittime)).utcOffset(new Date(redeem.audittime).getTimezoneOffset()).format("YYYY-MM-DD HH:mm:ss")}
                  </Text>
                </View>
              ) : null}
              {redeem.finaltime ? (
                <View style={redeemStyles.redeemDetailLstLi}>
                  <Text style={redeemStyles.listLiDiv}>最終時間/放弃时间</Text>
                  <Text style={redeemStyles.listLiDivRight}>
                  {moment(new Date(redeem.finaltime)).utcOffset(new Date(redeem.finaltime).getTimezoneOffset()).format("YYYY-MM-DD HH:mm:ss")}
                  </Text>
                </View>
              ) : null}
            </View>
          </View>
          {redeem.status === 0x11 || redeem.status === 0x21 ? (
            <View>
              <View>
                <Text style={redeemStyles.confirmTip}>
                  確認贖回：在T+1內您的USDT錢包將收到回款，審核期間贖回部分無收益
                  放棄贖回：審核期間贖回部分仍有收益，但7天內不得再次申請贖回
                </Text>
              </View>

              <View style={redeemStyles.buttonContainer}>
                <TouchableOpacity
                  onPress={this.handleConfirm.bind(this)}
                  style={redeemStyles.buttonContainerButton}
                >
                  <Text
                    style={[
                      redeemStyles.buttonContainerButton,
                      redeemStyles.buttonContainerConfirmBtn
                    ]}
                  >
                    确认赎回
                  </Text>
                </TouchableOpacity>
                <TouchableOpacity
                  onPress={this.handleCancel.bind(this)}
                  style={redeemStyles.buttonContainerButton}
                >
                  <Text
                    style={[
                      redeemStyles.buttonContainerButton,
                      redeemStyles.buttonContainerGiveupBtn
                    ]}
                  >
                    {this.state.redeem.status === 0x11
                      ? "取消贖回"
                      : "放棄贖回"}
                  </Text>
                </TouchableOpacity>
              </View>
            </View>
          ) : null}
        </View>
      </View>
    );
  }
}

export default RedeemConfirm;
